<template>
  <div class='containerStart'>
    <el-table :data="SelectedTableData" style="width: 100%" fit :max-height="maxHeight" border stripe size="mini" highlight-current-row :header-cell-style="{ background: '#e5e5e5', color: '#000' }">
      <el-table-column prop="deviceNodeId" label="设备标识" />
      <el-table-column prop="deviceModel" label="设备型号" />
      <el-table-column prop="containerName" label="容器名称">
      </el-table-column>
      <el-table-column prop="containerIndex" label="容器下标">
      </el-table-column>
      <el-table-column prop="containerIp" label="容器IP地址" />
      <el-table-column prop="containerMemoryTotal" label="分配内存（MB）" />
      <el-table-column prop="containerStorageTotal" label="存储空间（MB）" />
      <el-table-column prop="containerCpuPeriod" label="CPU的运行周期(μs)" />
      <el-table-column prop="containerCpuQuota" label="CPU运行时间(μs)" />
      <el-table-column prop="containerHyperv" label="技术类型" />
      <el-table-column prop="containerIoPort" label="物理接口" />
      <el-table-column prop="containerStateDescribe" label="启动状态" width="110">
        <template slot-scope="scope">
          <span style="color:#409EFF" v-if="scope.row.containerState == 'execute'">执行中</span>
          <span style="color: #67c23a" v-if="scope.row.containerState == 'success'">成功</span>
          <span style="color: #F56C6C" v-if="scope.row.containerState == 'fail'">失败</span>
        </template>

      </el-table-column>
    </el-table>
    <!-- <div style="text-align: right">
      <pagination v-show="pagination.total > 0" :limit.sync="pagination.pageSize" :page.sync="pagination.page" :total="pagination.total" @pagination="getPageList" />
    </div> -->
    <div style="text-align: right;margin-top:10px">
      <el-button type="primary" @click="nextConfig" size="small" :disabled="!SelectedTableData.length">完成</el-button>
    </div>
    <el-dialog title="数据卷列表" :visible.sync="dialogVisibleVolume" top="50px" width="1000px" :close-on-click-modal="false">
      <el-table :data="volumesList" ref="deviceTableDataRef" style="width: 100%" fit :max-height="maxHeight" border stripe size="mini" highlight-current-row
        :header-cell-style="{ background: '#e5e5e5', color: '#000' }">
        <el-table-column prop="path" label="数据卷根目录" />
        <el-table-column prop="size" label="数据卷大小（MB）" />
        <el-table-column prop="visible" label="数据卷权限">
          <template slot-scope="{ row,$index}">
            <span v-if="row.visible==0">不可访问</span>
            <span v-if="row.visible==1">可访问</span>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import { getById } from "@/api/container"
import storage from "@/utils/storage";

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      dialogVisibleVolume: false,
      volumesList: [],
      SelectedTableData: [],
      pagination: {
        total: 1,
        page: 1,
        pageSize: 10,
      },
      taskState: '',
      timers: null
    }
  },
  //监听属性 类似于data概念
  computed: {
    maxHeight() {
      var curHeight =
        window.innerHeight ||
        document.documentElement.clientHeight ||
        document.body.clientHeight;
      return curHeight - 280;
    }
  },
  //监控data中的数据变化
  watch: {},
  //生命周期 - 创建完成（可以访问当前this实例）
  created() { },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.$bus.$on('toStart', id => {
      this.getPageList(id)
    })
  },
  methods: {
    checkVolume(item) {
      this.volumesList = item.volumes
      this.dialogVisibleVolume = true
    },
    nextConfig() {
      if (this.taskState != 'success') {
        this.$message({
          message: '当前任务状态尚未完成启动，不能进行下一步',
          type: 'warning'
        });
        return
      }
      this.$router.push({
        path: "/myContainer",
      })
      return
      var isInit = storage.getItem('isInit')//通过isInit 判断是从容器商店跳转过来还是从我的容器跳转过来
      if (isInit) {
        this.$router.push({
          path: "/myContainer",
        })
      } else {
        this.$router.push({
          path: "/containerShop",
        })
      }
    },
    // getPageList(id) {
    //   getById(id).then(res => {
    //     console.log(res)
    //     if (res.code == '200') {
    //       this.SelectedTableData = res.data.containerTaskDetailDTOList
    //       this.taskState = res.data.taskState
    //     }
    //   })
    // },
    getPageList(id) {
      let self = this
      getById(id).then(res => {
        if (res.code == '200') {
          localStorage.setItem('containerRow', JSON.stringify(res.data))
          this.SelectedTableData = res.data.containerTaskDetailDTOList
          this.taskState = res.data.taskState
          this.timers && clearTimeout(this.timers);
          this.timers = null
          this.timers = setTimeout(() => {
            self.getPageList(id)
          }, 5000)
          if (res.data.taskState == 'success') {
            clearTimeout(this.timers);
            this.timers = null
          }
        }
      })
    },
  },
  destroyed() {
    this.timers && clearTimeout(this.timers);
    this.timers = null
  },
  beforeDestroy() {
    this.timers && clearTimeout(this.timers);
    this.timers = null
    this.$bus.$off('toStart')
  },
}
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
.containerStart {
  padding: 20px;
}
</style>